<template>
  <el-card class="filter-card" shadow="never">
    <el-form :model="localQueryParams" inline @submit.prevent="handleSearch">
      <el-form-item label="订单状态">
        <el-select v-model="localQueryParams.orderStatus" clearable placeholder="全部状态" class="form-item-width">
          <el-option label="待确认" value="pending" />
          <el-option label="已确认" value="confirmed" />
          <el-option label="配货中" value="picking" />
          <el-option label="已发货" value="shipped" />
          <el-option label="已完成" value="completed" />
          <el-option label="已取消" value="cancelled" />
        </el-select>
      </el-form-item>
      
      <el-form-item label="开票状态">
        <el-select v-model="localQueryParams.invoiceStatus" clearable placeholder="全部状态" class="form-item-width">
          <el-option label="未开票" value="uninvoiced" />
          <el-option label="已开票" value="invoiced" />
          <el-option label="已收票" value="received" />
        </el-select>
      </el-form-item>
      
      <el-form-item label="客户名称">
        <el-input
          v-model="localQueryParams.customerName"
          placeholder="输入客户名称"
          clearable
          style="width: 150px"
        />
      </el-form-item>
      
      <el-form-item label="订单日期">
        <el-date-picker
          v-model="localQueryParams.orderDateRange"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="YYYY-MM-DD"
        />
      </el-form-item>
      
      <el-form-item label="订单金额">
        <el-input-number
          v-model="localQueryParams.minAmount"
          :min="0"
          placeholder="最小金额"
          style="width: 120px"
        />
        <span class="separator">-</span>
        <el-input-number
          v-model="localQueryParams.maxAmount"
          :min="0"
          placeholder="最大金额"
          style="width: 120px"
        />
      </el-form-item>
      
      <el-form-item>
        <el-button type="primary" :icon="Search" @click="handleSearch">
          查询
        </el-button>
        <el-button :icon="Refresh" @click="handleReset">
          重置
        </el-button>
        <el-button 
          link
          :icon="SetUp" 
          @click="showAdvancedFilter = !showAdvancedFilter"
        >
          高级筛选
        </el-button>
      </el-form-item>
    </el-form>

    <!-- 高级筛选 -->
    <el-collapse-transition>
      <div v-show="showAdvancedFilter" class="advanced-filter">
        <el-divider content-position="left">高级筛选</el-divider>
        <el-form :model="localQueryParams" inline @submit.prevent="handleSearch">
          <el-form-item label="平台来源">
            <el-select v-model="localQueryParams.platformSource" clearable class="form-item-width">
              <el-option label="政采云" value="zcy" />
              <el-option label="手工录入" value="manual" />
              <el-option label="其他平台" value="other" />
            </el-select>
          </el-form-item>
          
          <el-form-item label="负责销售">
            <el-input
              v-model="localQueryParams.responsibleSalesman"
              placeholder="输入销售姓名"
              clearable
              style="width: 150px"
            />
          </el-form-item>
          
          <el-form-item label="订单编号">
            <el-input
              v-model="localQueryParams.platformOrderId"
              placeholder="输入平台订单号"
              clearable
              style="width: 200px"
            />
          </el-form-item>
          
          <el-form-item label="包含赠品">
            <el-switch v-model="localQueryParams.includeGifts" />
          </el-form-item>
          
          <el-form-item label="需要催款">
            <el-switch v-model="localQueryParams.needCollection" />
          </el-form-item>
        </el-form>
      </div>
    </el-collapse-transition>
  </el-card>
</template>

<script setup lang="ts">
import { ref, reactive, watch } from 'vue'
import { Search, Refresh, SetUp } from '@element-plus/icons-vue'
import type { OrderQueryParams } from '../types'

// 定义组件属性
interface Props {
  queryParams: OrderQueryParams
}

const props = defineProps<Props>()

// 定义组件事件
const emit = defineEmits<{
  (e: 'update:query-params', params: OrderQueryParams): void
  (e: 'search'): void
  (e: 'reset'): void
}>()

// 本地查询参数
const localQueryParams = reactive<OrderQueryParams>({ ...props.queryParams })

// 监听属性变化
watch(
  () => props.queryParams,
  (newVal) => {
    Object.assign(localQueryParams, newVal)
  },
  { deep: true }
)

// 监听本地参数变化并向上同步
watch(
  localQueryParams,
  (newVal) => {
    emit('update:query-params', { ...newVal })
  },
  { deep: true }
)

// 响应式数据
const showAdvancedFilter = ref(false)

// 事件处理函数
const handleSearch = () => {
  emit('search')
}

const handleReset = () => {
  Object.assign(localQueryParams, {
    page: 1,
    limit: 20,
    orderStatus: '',
    invoiceStatus: '',
    customerName: '',
    orderDateRange: [],
    minAmount: undefined,
    maxAmount: undefined,
    platformSource: '',
    responsibleSalesman: '',
    platformOrderId: '',
    includeGifts: false,
    needCollection: false,
    sortField: 'order_date',
    sortOrder: 'desc'
  })
  emit('reset')
}
</script>

<style scoped lang="scss">
.filter-card {
  margin-bottom: 20px;
  
  .separator {
    margin: 0 8px;
    color: #c0c4cc;
  }
  
  .advanced-filter {
    margin-top: 16px;
    
    .el-divider {
      margin: 16px 0;
    }
  }
}
</style>